<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="../layui/layui/css/layui.css">
</head>
<body class="layui-layout-body">



	<form class="layui-form">
		<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		<div class="layui-form-item">
			<label class="layui-form-label">品种</label>
			<div class="layui-input-block">
				<input type="text" name="name" placeholder="请输入" autocomplete="off"
					class="layui-input" id="name">
			</div>
		</div>
		
			<div class="layui-form-item">
					<label class="layui-form-label">品种类</label>
					<div class="layui-input-block">
						<select name="pzl" lay-verify="required" id="pzl">
							
						</select>
					</div>
				</div>
				
		<div class="layui-form-item">
			<label class="layui-form-label">年龄</label>
			<div class="layui-input-block">
				<input type="text" name="age" placeholder="请输入" autocomplete="off"
					class="layui-input" id="age">
			</div>
		</div>		
				
				
				
	 	<div class="layui-form-item">
			<label class="layui-form-label">颜色</label>
			<div class="layui-input-block">
				<input type="text" name="yanse" placeholder="请输入" autocomplete="off"
					class="layui-input" id="yanse">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">指导价格</label>
			<div class="layui-input-block">
				<input type="text" name="shoujia" placeholder="请输入" autocomplete="off"
					class="layui-input" id="jiage">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">简介</label>
			<div class="layui-input-block">
				<input type="text" name="jianjie" placeholder="请输入" autocomplete="off"
					class="layui-input" id="jianjie">
			</div>
		</div>


		<div class="layui-form-item">
					<label class="layui-form-label">产品图片</label>
					<div class="layui-input-block">
						<button type="button" class="layui-btn" id="test1">
							<i class="layui-icon">&#xe67c;</i>上传图片
						</button>

						<span id="imgname"></span>
					</div>
				</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="sub">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
	</form>




	<script src="../layui/layui/layui.js"></script>

	<script src="../js/jquery-1.8.2.js"></script>

	<script type="text/javascript">
		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var url = decodeURI(decodeURI(window.location.search))
			var r = url.substr(1).match(reg);
			if (r != null)
				return unescape(r[2]);
			return null;
		}
		$(document).ready(function() {
			var id = getQueryString("id");
			var name = getQueryString("name");
		
			var age = getQueryString("age");
			var jiage = getQueryString("jiage");
			var jianjie = getQueryString("jianjie");
			var yanse = getQueryString("yanse");
			var pzl = getQueryString("pzl");
			
			//方法一 :query赋值
			
			$("#name").val(name);
			$("#jiage").val(jiage);
			$("#jianjie").val(jianjie);
			$("#yanse").val(yanse);
			
			$("#age").val(age);//todo....
			
			
			
			
		});
	
		//JavaScript代码区域
		layui.use([ 'form', 'upload', 'layer' ], function() {
			var form = layui.form;
			var layer = layui.layer;
			//各种基于事件的操作，下面会有进一步介绍

			var upload = layui.upload;
			var $ = layui.$;//jquery对象
			//执行实例
			var uploadInst = upload.render({
				elem : '#test1' //绑定元素
				,
				method : 'post',
				url : '../cuimg' //上传接口
				,
				done : function(res) {
					//上传完毕回调
					console.log(res);

					if (res.code == 0) {
						/* $("#test1").val(res.data); */
						$("#imgname").html(res.data);
					}
				},
				error : function() {
					//请求异常回调
					console.log(res);
				}
			});

			
			$(function() {
				var pzl = getQueryString("pzl");
				$.ajax({
	
					url : "../Zhongleiservlet",
					type : "get",
					data : {

					},
					success : function(res) {
						var $select = $("#pzl");
						//下拉菜单
						for (var i = 0; i < res.data.length; i++) {
							if(res.data[i].zl==pzl){
								$select.append("<option value='"+res.data[i].id+"' selected='selected'>"+res.data[i].zl +"</option>");
								
							}else{
								$select.append("<option value='"+res.data[i].id+"'>"+res.data[i].zl +"</option>");
								
							}
							
						}
						form.render('select');
					}
				});
			});

			//submit 提交事件
			form.on('submit(sub)', function(data) {

				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				data.field.img = $("#imgname").html();
				var id = getQueryString("id");
				data.field.id = id;

				$.ajax({

					url : "../cuup",
					type : "get",
					data : data.field,
					success : function(res) {
						layer.msg(res.msg);
					}
				});

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		});
	</script>




</body>
</html>